<template>
    <div class="container">
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/SystemSetting/FormSetting' }">表单管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">表单信息
            </div>
              
            <div class="card-body">
                <el-form ref="classForm" :model="form" :rules="rules" label-width="120px">
                <div class="info-ruleForm">
                                        <el-form-item label="表单名称"  >
                            <el-input v-model="SubmitForm.name" disabled="true"></el-input>
                        </el-form-item>
                                  <el-form-item label="分类">
                                     <el-input v-model="SubmitForm.typeName" disabled="true">
                                      </el-input>
                                  </el-form-item>
                    <div class="info-ruleForm">
                        <el-form-item label="申请人">
                            <el-input  placeholder="选择其他申请人,流程为代理申请" disabled="true">
                                   <div class="setPosition">
                                     
                                  </div>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="申请日期"  >
                            <el-date-picker type="date" placeholder="选择日期" disabled="true"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-input ref="userFind" disabled="true ">
                               <div class="setPosition">  
                                  </div>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="房间号"  >
                            <el-input disabled="true " ></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" >
                            <el-input disabled="true "></el-input>
                        </el-form-item>
<!--额外的字段拼接 start--> <div class="extraForm">
                             <el-form-item :label="item.formName" v-for="(item,index) in SubmitForm.flowExtraApplyList" :key="index" v-show="item.isShow">       
                                     <el-input v-if="item.domName == 'input'"  disabled="true"></el-input>
                                      <el-radio-group v-if="item.domName == 'radio'  && item.isShow" disabled="true">
                                          <el-radio v-for="val in toArray(item.optionalValue)" :label="val" :key="val.index"></el-radio>
                                      </el-radio-group>
                                      <el-checkbox-group v-if="item.domName == 'checkbox'  && item.isShow" disabled="true">
                                          <el-checkbox :label="val"  v-for="val in toArray(item.optionalValue)" :key="val.index"></el-checkbox>
                                      </el-checkbox-group>  
                                    <el-select v-if="item.domName == 'select'  && item.isShow"  placeholder="请选择">
                                     <el-option :value="val"  v-for="val in toArray(item.optionalValue)" :key="val.index" >{{val}}</el-option>
                                    </el-select>          
                              </el-form-item></div>
<!--额外的字段拼接 end-->
                        <!-- <el-form-item label="操作系统">
                            <el-select placeholder="请选择操作系统">
                                <el-option value="window10 64bit pro">window10 64bit pro</el-option>
                                <el-option value="window 7 64bit">window 7 64bit</el-option>
                                <el-option value="CentOS 7.5">CentOS 7.5</el-option>
                                <el-option value="RedHat 12">RedHat 12</el-option>
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="预装软件列表">
                            <el-checkbox-group class="authList">
                                <el-checkbox label="Adobe Acrobat 7.0" name="softList"></el-checkbox>
                                <el-checkbox label="AutoCAD 2004" name="softList"></el-checkbox>
                                <el-checkbox label="Phontshop CC2018" name="softList"></el-checkbox>
                                <el-checkbox label="ACD SEE" name="softList"></el-checkbox>
                                <el-checkbox label="万能五笔" name="softList"></el-checkbox>
                                <el-checkbox label="紫光拼音" name="softList"></el-checkbox>
                                <el-checkbox label="金山词霸" name="softList"></el-checkbox>
                                <el-checkbox label="Office2007" name="softList"></el-checkbox>
                                <el-checkbox label="WinRAR" name="softList"></el-checkbox>
                                <el-checkbox label="PdxReader" name="softList"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item> -->
                        <!-- <el-form-item label="其他软件" >
                            <el-input  placeholder="多个软件请用 , 逗号隔开 "></el-input>
                        </el-form-item> -->
                        <el-form-item label="申请理由" >
                            <el-input type="textarea"  placeholder="请说明申请理由" disabled="true"></el-input>
                        </el-form-item>
                    </div>               
                </div>


                <hr>
                <el-form-item>
                    <!-- <el-button type="primary" @click="onSubmit()" :disabled="disabled">立即创建</el-button> -->
                    <el-button @click="goBack">返回上一级</el-button>
                </el-form-item>
                </el-form>
            </div>
        </div> 
    </div>

</template>

<script>
import request from "@/utils/request";
export default {
  name: "Create",
  data() {
    return {
      SubmitForm: {
        flowExtraApplyList: [],
        typeId:"",
        typeName:"",
        name:""
      },
      disabled: false,
      myIsShow:true,
      ruleForm: {
        isShow: true,
        formName: "",
        domName: "input",
        optionalValue: ""
      },
      rules: {
        propertyName: [
          { required: true, message: "请输入属性名称", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      options: [],
      selectedOptions: [],
      disabled: false,
      showTree: false,
      treeType: "",
      rules: {
        label: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {

    goBack() {
      this.$router.go(-1);
    },

    toArray(string) {
      return string.split(";");
    },

    getDetail(){
            request({
        url:
          this.$api.queryDetailFlowForm +
          `?id=${this.$route.query.id}`,
        method: "get"
      }).then(res => {
        this.SubmitForm = res.data;
      });
    }

  },
  mounted() {
      this.getDetail();
  },
  computed: {

  }
};
</script>
<style scoped>
.extraForm .child{
   display:none;   
}
.extraForm:hover .child{
     display:block;   
}
.extraForm:hover .child .remove{
    cursor:pointer;
}
</style>